<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听事件</title>
</head>
<body>
    <button>传统方法注册事件</button>
    <button>方法监听事件</button>
    <script>
        //传统方式
        let btn = document.querySelectorAll('button');
        btn[0].onclick = function(){
            alert('11')
            //传统方法具有单一性如果想要两个按钮都
            // 绑定不同的事件重复写的话后面的会覆盖掉前面的
        }
        //2.监听注册事件,注意！！ 监听注册事件,注意！！ addEventListener里面的事件类型是字符串类型，必定加引号而且不带on
        // 同一个元素同i一个事件可以添加多个事件监听器
        btn[i].addEventListener('click',function(){
            alert('222')
        })
    </script>
</body>
</html>